<template>
	<view class="con">
		<view class="main">
			<view class="top flex">
				<view class="topc topc_1" :class="type===20?'active':''" @click="tabChange(20)">补贴</view>
				<!-- <view class="topc topc_2" :class="type===10?'active':''" @click="tabChange(10)">快递</view> -->
        <view class="topc topc_2" :class="type===200?'active':''" @click="tabChange(200)">好物</view>
				<view class="topc topc_2" :class="type===30?'active':''" @click="tabChange(30)">运营</view>
				<view class="topc topc_3" :class="type===40?'active':''" @click="tabChange(40)">跨境</view>
			</view>
			<!-- 下面三个内容 -->
			<view class="wrap">
				<!-- 快递回收 -->
				<view class="hui flex flex_between">
					<view class="huili">
						<!-- <view class="huili_v1" v-if="type===20">补贴个人(元)</view> -->
            <view class="huili_v1">个人总收益(元)</view>
						<view class="huili_v2" v-if="type!==40">{{moneyinInfo.will_left_val0}}</view>
            <view class="huili_v2" v-if="type===40">0.00</view>
					</view>
					<view class="huili">
						<!-- <view class="huili_v1" v-if="type===20">补贴团队(元)</view> -->
            <view class="huili_v1">团队总收益(元)</view>
						<view class="huili_v2" v-if="type!==40">{{moneyinInfo.will_right_val0}}</view>
            <view class="huili_v2" v-if="type===40">0.00</view>
					</view>
				</view>
				<!-- <view class="datalist flex">
          <view v-for="(item,index) in datalistList" class="datalist_li flex" :key="index" :class="selectIndex===index?'active':''" @click="changData(index)">
            <view class="datalist_li_c">{{item.name}}</view>
            <view class="datalist_line" v-if="index<datalistList.length-1"></view>
          </view>
        </view> -->
				<!-- 中间内容 -->
				<view class="zongji flex flex_between">
					<view class="uni-list-cell-db flex">
						<picker mode="date" fields="month" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{date}}</view>
						</picker>
						<image class="dataimg" mode="widthFix" src="/static/mine/img22.png"></image>
					</view>
					<view class="zongji_y flex">
						<view class="zongji_yli flex" :class="modetype===1?'':'huise'" @click="change_1">
							<image class="zongji_yli_img" mode="widthFix" src="/static/mine/img20.png"></image>
							<view class="zongji_yli_v" v-if="type!==40">￥{{moneyinInfo.will_left_val}}</view>
              <view class="zongji_yli_v" v-if="type===40">￥0.00</view>
						</view>
						<view class="zongji_yli flex" :class="modetype===1?'huise':''" @click="change_2">
							<image class="zongji_yli_img" mode="widthFix" src="/static/mine/img21.png"></image>
							<view class="zongji_yli_v" v-if="type!==40">￥{{moneyinInfo.will_right_val}}</view>
              <view class="zongji_yli_v" v-if="type===40">￥0.00</view>
						</view>
					</view>
				</view>
        <!-- 补贴 -->
        <view class="listM" v-if="type===20 && hasdata">
        	<view class="listMt flex flex_between">
        		<view class="listMtc_te1 listMc_li_t_te1" v-if="modetype===1">订单编号</view>
        		<view class="listMtc_te1 listMc_li_t_te1" v-if="modetype===2">ID</view>
        		<view class="listMtc_te2 listMtc_2">日期</view>
        		<view class="listMtc_te3 listMtc_3" v-if="modetype===1">补贴</view>
            <view class="listMtc_te3 listMtc_3" v-if="modetype===2">收益</view>
        	</view>
        	<view class="listMc">
        		<view class="listMc_li flex flex_between" v-for="(item,index) in moneyinInfoList" :key="index">
        			<view class="listMc_li_t listMc_li_t_te1">{{item.ordernum}}</view>
        			<view class="listMc_li_t listMc_li_t_te2">{{item.time}}</view>
        			<view class="listMc_li_t2 listMc_li_t_te2">+{{item.money}}</view>
        		</view>
        	</view>
        </view>
        <!-- 好物 -->
        <view class="listM" v-if="type===200 && hasdata">
        	<view class="listMt flex flex_between">
        		<view class="listMtc_te1 listMc_li_t_te1" v-if="modetype===1">产品名称</view>
        		<view class="listMtc_te1 listMc_li_t_te1" v-if="modetype===2">ID</view>
        		<view class="listMtc_te2 listMtc_2">日期</view>
        		<view class="listMtc_te3 listMtc_3" v-if="modetype===1">补贴</view>
            <view class="listMtc_te3 listMtc_3" v-if="modetype===2">收益</view>
        	</view>
        	<view class="listMc">
        		<view class="listMc_li flex flex_between" v-for="(item,index) in moneyinInfoList" :key="index">
        			<view class="listMc_li_t listMc_li_t_te1">{{item.ordernum}}</view>
        			<view class="listMc_li_t listMc_li_t_te2">{{item.time}}</view>
        			<view class="listMc_li_t2 listMc_li_t_te2">+{{item.money}}</view>
        		</view>
        	</view>
        </view>
				<!-- 快递 -->
				<view class="listM" v-if="type===10 && hasdata">
					<view class="listMt flex flex_between">
						<view class="listMtc listMtc_1" v-if="modetype===1">号码</view>
						<view class="listMtc listMtc_1" v-if="modetype===2">ID</view>
						<view class="listMtc listMtc_2">日期</view>
						<view class="listMtc listMtc_3">数量</view>
						<view class="listMtc listMtc_4">收益</view>
					</view>
					<view class="listMc">
						<view class="listMc_li flex flex_between" v-for="(item,index) in moneyinInfoList" :key="index">
							<view class="listMc_li_t listMtc_1">{{item.ordernum}}</view>
							<view class="listMc_li_t">{{item.time}}</view>
							<view class="listMc_li_t">{{item.num}}</view>
							<view class="listMc_li_t2">+{{item.money}}</view>
						</view>
					</view>
				</view>
				
				<!-- 运营 -->
				<view class="listM" v-if="type===30 && hasdata">
					<view class="listMt flex flex_between">
						<view class="listMtc_te1 listMc_li_t_te1" v-if="modetype===1">日期</view>
						<view class="listMtc_te1 listMc_li_t_te1" v-if="modetype===2">ID</view>
						<view class="listMtc_te2 listMtc_2">单量</view>
						<view class="listMtc_te3 listMtc_3">收益</view>
					</view>
					<view class="listMc">
						<view class="listMc_li flex flex_between" v-for="(item,index) in moneyinInfoList" :key="index">
							<view class="listMc_li_t listMc_li_t_te1" v-if="modetype===1">{{item.time}}</view>
              <view class="listMc_li_t listMc_li_t_te1" v-if="modetype===2">{{item.ordernum}}</view>
							<view class="listMc_li_t listMc_li_t_te2">{{item.num}}</view>
							<view class="listMc_li_t2 listMc_li_t_te2">+{{item.money}}</view>
						</view>
					</view>
				</view>
				<!-- 跨境 -->
				<view class="listM" v-if="type===40 && hasdata && false">
					<view class="listMt flex flex_between">
						<view class="listMtc listMtc_1" v-if="modetype===1">账号</view>
						<view class="listMtc listMtc_1" v-if="modetype===2">ID</view>
						<view class="listMtc listMtc_2">日期</view>
						<view class="listMtc listMtc_3">单量</view>
						<view class="listMtc listMtc_4">收益</view>
					</view>
					<view class="listMc">
						<view class="listMc_li flex flex_between" v-for="(item,index) in moneyinInfoList" :key="index">
							<view class="listMc_li_t">{{item.ordernum}}</view>
							<view class="listMc_li_t">{{item.time}}</view>
							<view class="listMc_li_t">{{item.num}}</view>
							<view class="listMc_li_t2">+{{item.money}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
  import {
    getUserMoneyinlist //数据
  } from '@/request/api.js'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
        // openid:'oycWz5SBi1rMTuqdQhLy4iSvgHjU',//元辰的openid
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        type: 20, //10快递、20补贴、30运营、40跨境、200好物
				date: currentDate,
        modetype:1,//1个人、2团队
        moneyinInfo:{}, //收益数据
        moneyinInfoList:[],//收益列表
        hasdata:false,
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15//每页数量
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
		  // this.getUserMoneyinlistFun()
		},
		onShow() {
      this.page = 1
      this.type = 20
      this.modetype = 1
      this.moneyinInfoList = []
		  this.getUserMoneyinlistFun()
		},
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
		methods: {
      // 获取我的收益
      getUserMoneyinlistFun(){
        let param = {
          openid: this.openid,
          page:this.page,
          type: this.type,
          date: this.date,
          modetype: this.modetype
        }
        this.moneyinInfo = {}
        console.log('type是多少')
        console.log(this.type)
        if(this.type!==40){
          getUserMoneyinlist(param).then(res=>{
            if(res.error_code===0){
              this.moneyinInfo = res.data
              this.total = Number(res.data.total);
              this.pagesizes = Number(res.data.pagesizes);
              let listRe = res.data.arrList
              if(listRe.length>0){
                this.moneyinInfoList = this.moneyinInfoList.concat(listRe);
              }
              if(this.moneyinInfoList.length>0){
                this.hasdata = true
              }else{
                this.hasdata = false
              }
            }else{
              uni.showToast({
                icon: 'none',
                title: res.msg
              })
            }
          })
        }
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getUserMoneyinlistFun()
      },
      
			tabChange(type) {
        console.log('切换最上面tab---')
        this.moneyinInfoList = []
        this.page = 1
				this.type = type
        this.modetype = 1
        this.getUserMoneyinlistFun()
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}`;
			},
			bindDateChange: function(e) {
        console.log('切换日期')
        console.log(e.detail.value)
        this.moneyinInfoList = []
        this.page = 1
				this.date = e.detail.value
        this.getUserMoneyinlistFun()
			},
			// 切换个人和团队
			change_1() {
        this.moneyinInfoList = []
        this.page = 1
				this.modetype = 1
        this.getUserMoneyinlistFun()
			},
			change_2() {
        this.moneyinInfoList = []
        this.page = 1
				this.modetype = 2
        this.getUserMoneyinlistFun()
			},

		}
	}
</script>

<style scoped lang="scss">
	.con {
		.main {
			width: 100%;
			height: auto;
			// padding: 20rpx;
			box-sizing: border-box;

			.top {
				margin: 20rpx 0;
				margin-bottom: 40rpx;
				height: 64rpx;
				overflow: hidden;
				border-radius: 40rpx;

				.topc {
					display: inline-block;
					width: 140rpx;
					height: 64rpx;
					background-color: rgba(0, 0, 0, 1);
					text-align: center;
					line-height: 64rpx;
					color: #fff;
					font-size: 28rpx;
				}

				.topc.active {
					background-color: rgba(249, 191, 65, 1);
					color: rgba(16, 16, 16, 1);
				}

				.topc_2 {
					margin: 0 2rpx;
				}

				.topc_3 {
					border-top-right-radius: 40rpx;
					border-bottom-right-radius: 40rpx;
				}
			}

			.hui {
				width: 100%;
				height: auto;

				.huili {
					width: 345rpx;
					height: 140rpx;
					border-radius: 20rpx;
					background-color: rgba(255, 255, 255, 1);
					text-align: center;

					.huili_v1 {
						color: rgba(16, 16, 16, 1);
						font-size: 28rpx;
						line-height: 40rpx;
						margin-top: 28rpx;
						margin-bottom: 4rpx;
					}

					.huili_v2 {
						line-height: 56rpx;
						color: rgba(16, 16, 16, 1);
						font-size: 40rpx;
						font-family: 'AvantGardeFont';
					}
				}
			}

			.datalist {
				border-radius: 20rpx;
				background-color: rgba(255, 255, 255, 1);
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				height: 104rpx;
				width: 100%;
				margin-top: 20rpx;

				.datalist_li {
					width: 25%;
					box-sizing: border-box;
					color: rgba(137, 137, 137, 1);
					font-size: 28rpx;
					text-align: center;
				}

				.datalist_li_c {
					width: 98%;
				}

				.datalist_li.active {
					color: rgba(16, 16, 16, 1);
				}

				.datalist_line {
					width: 4rpx;
					height: 20rpx;
					background: rgba(187, 187, 187, 1);
				}
			}
		}

		.listM {
			width: 100%;
			height: auto;
			margin-top: 40rpx;

			.listMt {
				color: rgba(137, 137, 137, 1);
				font-size: 24rpx;

				.listMtc {
					width: 25%;
					text-align: center;
				}

				.listMtc_te1 {
					width: 50%;
					text-align: center;
				}

				.listMtc_te2 {
					width: 25%;
					text-align: center;
				}

				.listMtc_te3 {
					width: 25%;
					text-align: center;
				}
			}

			.listMc {
				width: 100%;
				height: auto;

				.listMc_li {
					width: 100%;
					height: 88rpx;
					border-radius: 20rpx;
					background-color: rgba(255, 255, 255, 1);
					margin-top: 20rpx;
					overflow: hidden;

					.listMc_li_t {
						color: rgba(16, 16, 16, 1);
						font-size: 24rpx;
						width: 25%;
						text-align: center;
            word-break: break-all;
					}

					.listMc_li_t2 {
						width: 25%;
						height: 88rpx;
						color: rgba(0, 0, 0, 1);
						font-size: 24rpx;
						line-height: 88rpx;
						background-color: rgba(211, 211, 211, 1);
						text-align: center;
					}

					.listMc_li_t.listMc_li_t_te1 {
						width: 50%;
					}

					.listMc_li_t.listMc_li_t_te2 {
						width: 25%;
					}

					.listMc_li_t2.huanse {
						background-color: rgba(249, 191, 65, 1);
					}
				}
			}
		}

		.zongji {
			width: 100%;
			margin-top: 50rpx;

			.uni-list-cell-db {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;

				.dataimg {
					width: 28rpx;
					height: auto;
					margin-left: 10rpx;
				}
			}

			.zongji_y {
				.zongji_yli {
					justify-content: center;
					height: 44rpx;
					line-height: 44rpx;
					border-radius: 40rpx;
					background-color: rgba(249, 191, 65, 1);
					color: rgba(16, 16, 16, 1);
					font-size: 24rpx;
					padding: 0 20rpx;
					align-items: center;
					margin-left: 20rpx;

					.zongji_yli_v {
						font-family: 'AvantGardeFont';
						margin-top: 2rpx;
					}

					.zongji_yli_img {
						width: 24rpx;
						height: auto;
					}
				}

				.zongji_yli.huise {
					background-color: rgba(211, 211, 211, 1);
				}

			}
		}


	}
</style>